<template>
  <div class="pageMain_box">
    <div class="pageMain_left">
      <div class="pageLeft_top">
        <div class="pageLeftTop_title">
          <span>分税种统计</span>
        </div>
        <div class="pageLeftTop_chart">
          <VEcharts
            v-if="optsBingtu"
            autoresize
            :options="optsBingtu"
            style="width: 100%; height: 100%"
          />
        </div>
      </div>
      <div class="pageLeft_bot">
        <div class="pageLeftBot_title">
          <span>分部门支出</span>
        </div>
        <div class="pageLeftBot_chart">
          <VEcharts
            v-if="optsLeft"
            autoresize
            :options="optsLeft"
            style="width: 100%; height: 100%"
          />
        </div>
      </div>
    </div>
    <div class="pageMain_mid">
      <div class="pageMid_top">
        <div
          v-for="(item, index) in MidTopList"
          :key="index"
          class="pageMid_item"
        >
          <div class="picItem">
            <img :src="item.picUrl" alt="">
          </div>
          <div v-if="index < 2" class="conItem_top">
            <div class="conRow">
              <div class="conRow_left">
                <p>{{ item.label1 }}</p>
                <span>{{ item.num1 }}</span>
              </div>
              <div class="conRow_right">
                <p>{{ item.label2 }}</p>
                <span>{{ item.num2 }}</span>
              </div>
            </div>
            <div class="conRow">
              <div class="conRow_left">
                <p>{{ item.label3 }}</p>
                <span>{{ item.num3 }}</span>
              </div>
              <div class="conRow_right">
                <p>{{ item.label4 }}</p>
                <span>{{ item.num4 }}</span>
              </div>
            </div>
          </div>
          <div v-if="index >= 2" class="conItem">
            <div class="conText">
              <p>{{ item.label1 }}</p>
              <span>{{ item.num1 }}</span>
            </div>
            <div class="conText">
              <p>{{ item.label2 }}</p>
              <span>{{ item.num2 }}</span>
            </div>
            <div class="conText">
              <p>{{ item.label3 }}</p>
              <span>{{ item.num3 }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pageMid_bot">
        <div class="pgeBot_main">
          <div class="pageMidBot_title">
            <span>风险列表</span>
          </div>
          <div class="pageMidBot_con">
            <div class="pageMidBot_table">
              <dv-scroll-board
                :config="config"
                style="height:90%;color:#32C5FF;border-radius: 4px;overflow: hidden;"
              />
            </div>
            <div class="pageMidBot_pic">
              <el-carousel trigger="click" height="100%">
                <el-carousel-item v-for="(itpic, int) in picOpt" :key="int">
                  <img
                    :src="itpic"
                    alt=""
                    style="border-radius: 4px;opacity: 0.87;width:100%;height:90%"
                  >
                </el-carousel-item>
              </el-carousel>
              <div class="carousel_title">人文齐贤</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pageMain_right">
      <div class="pgeBot_top">
        <div class="pageRightTop_title">
          <span>纳税企业清单</span>
        </div>
        <div class="pageRightTop_table">
          <div class="pageRightTop_flag">
            <span
              :class="flagBtn === 1 ? 'flagSpan' : 'flagSp'"
              @click="getTable1"
            >财政总收入20强</span>
            <p
              :class="flagBtn === 2 ? 'flagSpan' : 'flagSp'"
              @click="getTable2"
            >
              一般公共预算收入20强
            </p>
          </div>
          <div class="line" />
          <p class="tableFlag">前30位</p>
          <div class="pageRightTop_tableCon">
            <dv-scroll-board
              :config="config1"
              style="height:95%;color:#32C5FF;border-radius: 4px;overflow: hidden;"
            />
          </div>
        </div>
      </div>
      <div class="pgeBot_bot">
        <div class="pageRightBot_title">
          <span>支出项目清单</span>
        </div>
        <div class="pageRightBot_table">
          <dv-scroll-board
            :config="config2"
            style="height:95%;color:#32C5FF;border-radius: 4px;overflow: hidden;"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VEcharts from '@/components/vecharts';
import { getQueryBodyByProduce } from '@/api/dynamicInterface';
export default {
  components: {
    VEcharts
  },
  data() {
    return {
      MidTopList: [
        {
          picUrl: require('@/assets/images/fullscreen/财政.png'),
          label1: '财政总收入：',
          num1: '-',
          label2: '排名：',
          num2: '-',
          label3: '增幅：',
          num3: '-',
          label4: '排名：',
          num4: '-'
        },
        {
          picUrl: require('@/assets/images/fullscreen/财政.png'),
          label1: '公共预算收入：',
          num1: '-',
          label2: '排名：',
          num2: '-',
          label3: '增幅：',
          num3: '66666',
          label4: '排名：',
          num4: '-'
        },
        {
          picUrl: require('@/assets/images/fullscreen/财政数据.png'),

          label1: '财政总支出：',
          num1: '-',
          label2: '支出进度：',
          num2: '-',
          label3: '增幅：',
          num3: '-'
        },
        {
          picUrl: require('@/assets/images/fullscreen/财政数据.png'),
          label1: '公共预算支出：',
          num1: '-',
          label2: '支出进度：',
          num2: '-',
          label3: '增幅：',
          num3: '-'
        }
      ],
      config: {},
      config1: {},
      config2: {},
      picOpt: [
        'https://img0.baidu.com/it/u=3605799270,918882586&fm=26&fmt=auto&gp=0.jpg',
        // "https://img0.baidu.com/it/u=2228122525,1125156893&fm=15&fmt=auto&gp=0.jpg",
        'https://img2.baidu.com/it/u=1526565663,663569777&fm=26&fmt=auto&gp=0.jpg'
      ],
      bingtuData: [],
      flagBtn: 1,
      leftList: {
        Ydata: [],
        shudata: []
      }
    };
  },
  computed: {
    optsBingtu() {
      const newArr2 = {
        // title: {
        //   text: "税种组成",
        //   left: "center"
        // },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '4%',
          itemWidth: 10,
          itemHeight: 10,
          itemStyle: {
            borderRadius: 5
          },
          textStyle: {
            // 图例文字的样式
            color: '#1fd2ff',
            fontSize: 12
          }
        },
        series: [
          {
            name: '分税种累计金额',
            type: 'pie',
            radius: '60%',
            data: this.bingtuData,
            center: ['40%', '40%'],
            label: {
              show: true,
              position: 'inner',
              formatter: function(params) {
                return params.data.ZXL + '%';
              },
              textStyle: {
                color: '#ffffff',
                fontSize: 12
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            color: [
              '#5AD8A6',
              '#F6BD16',
              '#E8684A',
              '#9270CA',
              '#5B8FF9',
              '#6DC8EC',
              '#5D7092',
              '#2A5cAA',
              '#87843B',
              '#45B97C'
            ]
          }
        ]
      };
      return newArr2;
    },
    optsLeft() {
      // const _this = this;
      const newArr = {
        color: ['#f6bd16', 'rgba(216,224,240,0.8)'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        // legend: {
        //   orient: "vertical",
        //   data: ["预算数", "支出数"],
        //   right: "5%",
        //   top: "0%",
        //   textStyle: {
        //     // 图例文字的样式
        //     color: "#ffffff;",
        //     fontSize: 12
        //   }
        // },
        grid: {
          top: '2%',
          left: '3%',
          right: '15%',
          bottom: '6%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          // axisLabel: {
          //   fontSize: 12
          // },
          axisTick: {
            // y轴刻度线
            show: false
          },
          type: 'category',
          data: this.leftList.Ydata,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#ffffff'
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: '12px'
            },
            formatter: function(params) {
              var newParamsName = '';
              var paramsNameNumber = params.length;
              var provideNumber = 6; // 一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = '';
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + '\n';
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            }
          }
        },
        series: [
          {
            name: '支出数',
            type: 'bar',
            // stack: 'total',
            barMaxWidth: '50',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              normal: {
                label: {
                  show: true, // 是否显示
                  position: 'right', // 显示位置
                  textStyle: {
                    // 文字样式
                    color: '#ffffff',
                    fontSize: '12'
                  },
                  formatter: function(params) {
                    // 核心部分 formatter 可以为字符串也可以是回调
                    if (params.value) {
                      // 如果当前值存在则拼接
                      return params.value;
                    } else {
                      // 否则返回个空
                      return 0;
                    }
                  }
                }
              }
            },
            data: this.leftList.shudata
          }
        ]
      };
      return newArr;
    }
  },
  created() {
    this.getBingList();
    this.getMidTop();
    this.gitRightTableTop();
    this.getMidTable();
    this.gitRightTableBot();
    this.getMidBotTable();
  },
  methods: {
    // 左侧饼图
    getBingList() {
      getQueryBodyByProduce({
        filterList: [
          { col: 'ENTERPRISENAME', value: '齐贤街道', symbol: 'eq' }
        ],
        pageIndex: 0,
        pageSize: 10,
        pageType: 1,
        tableId: 911
      }).then(res => {
        let ILJMONEY = 0;
        let ZXL = 0;
        res.data.forEach((item, index) => {
          if (index <= 7) {
            this.bingtuData.push({
              name: item.CNAME,
              value: item.ILJMONEY,
              ZXL: +item.ZXL.split('%')[0]
            });
          } else {
            ILJMONEY = item.ILJMONEY + ILJMONEY;
            ZXL = +item.ZXL.split('%')[0] + ZXL;
          }
        });
        this.bingtuData.push({
          name: '其他',
          value: ILJMONEY,
          ZXL: ZXL
        });
      });
    },
    // midTop
    getMidTop() {
      getQueryBodyByProduce({
        filterList: [
          { col: 'ENTERPRISENAME', value: '齐贤街道', symbol: 'eq' }
        ],
        pageIndex: 0,
        pageSize: 8,
        pageType: 1,
        tableId: 916
      }).then(res => {
        res.data.forEach((item, index) => {
          // if (index <= 2) {
          this.MidTopList[index].num1 = item.CZSR;
          this.MidTopList[index].num2 = item.QQPW;
          this.MidTopList[index].num3 = item.ZF;
          this.MidTopList[index].num4 = item.ZFPW;
          // }
          // if (index === 2) {
          //   this.MidTopList[3].num1 = item.CZSR;
          //   this.MidTopList[3].num2 = item.QQPW;
          //   this.MidTopList[3].num3 = item.ZF;
          //   this.MidTopList[3].num4 = item.ZFPW;
          // }
        });
      });
    },
    // table右上
    gitRightTableTop(tableId = 914) {
      getQueryBodyByProduce({
        filterList: [
          { col: 'ENTERPRISENAME', value: '齐贤街道', symbol: 'eq' }
        ],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: tableId
      }).then(res => {
        const arr = [];
        res.data.forEach(item => {
          arr.push([item.CNAME, '', ((item.ILJMONEY) / 10000).toFixed(2)]);
        });
        this.config1 = {
          header: ['企业名称', '本月入库', '本月累计'],
          data: arr,
          headerBGC: 'rgba(88, 163, 224,0.5)',
          evenRowBGC: 'rgba(0,0,0,0.00)',
          oddRowBGC: 'rgba(50, 197, 255,0.15)',
          waitTime: 5000,
          rowNum: 7
        };
      });
    },
    getTable1() {
      this.flagBtn = 1;
      this.gitRightTableTop(914);
    },
    getTable2() {
      this.flagBtn = 2;
      this.gitRightTableTop(915);
    },
    // table左下
    getMidTable() {
      getQueryBodyByProduce({
        filterList: [{ col: 'ENTERPRISECODE', value: '825001' }],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 926
      }).then(res => {
        res.data.forEach(item => {
          this.leftList.Ydata.unshift(item.ENTERPRISENAME);
          this.leftList.shudata.unshift(((item.ZCS) / 10000).toFixed(2));
        });
      });
    },
    // table右下
    gitRightTableBot() {
      getQueryBodyByProduce({
        filterList: [{ col: 'ENTERPRISECODE', value: '825001' }],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 927
      }).then(res => {
        const arr = [];
        res.data.forEach(item => {
          arr.push([item.PROGRAMNAME2, ((item.YSS) / 10000).toFixed(2), ((item.ZCS) / 10000).toFixed(2)]);
        });
        this.config2 = {
          header: ['项目名称', '预算数', '支出数'],
          data: arr,
          headerBGC: 'rgba(88, 163, 224,0.5)',
          evenRowBGC: 'rgba(0,0,0,0.00)',
          oddRowBGC: 'rgba(50, 197, 255,0.15)',
          waitTime: 5000,
          rowNum: 7
        };
      });
    },
    // table中间
    getMidBotTable() {
      getQueryBodyByProduce({
        filterList: [{ col: 'ENTERPRISECODE', value: '825001' }],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 962
      }).then(res => {
        const arr = [];
        let str = '';
        res.data.forEach(item => {
          if (item.FXDJ === '低' || item.FXDJ === '极低') {
            str = `<span style="color:#37CA61;">${item.FXDJ}</span>`;
          } else if (item.FXDJ === '中') {
            str = `<span style="color:#C1C919;;">${item.FXDJ}</span>`;
          } else if (item.FXDJ === '高' || item.FXDJ === '极高') {
            str = `<span style="color:#9F2115;">${item.FXDJ}</span>`;
          }
          arr.push([item.XMMC, str, item.FXMS]);
        });
        this.config = {
          header: ['项目名称', '风险等级', '风险描述'],
          data: arr,
          headerBGC: 'rgba(88, 163, 224,0.5)',
          evenRowBGC: 'rgba(0,0,0,0.00)',
          oddRowBGC: 'rgba(50, 197, 255,0.15)',
          align: ['center', 'center', 'center'],
          waitTime: 5000,
          columnWidth: [1000, 500, 2000],
          rowNum: 8
        };
      });
    }
  }
}; </script
>arr

<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.pageMain_box {
  height: 100%;
  padding: 0 px2vw(23px);
  display: flex;
  justify-content: space-between;
}
.pageMain_left {
  width: 21%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .pageLeft_top {
    height: 39%;
    background-image: url("~@/assets/images/fullscreen/框备份1.png");
    background-size: 100% 100%;
    .pageLeftTop_title {
      height: 13%;
      display: flex;
      align-items: center;
      padding-left: px2vw(35px);
      span {
        font-size: px2vw(18px);
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #1fd2ff;
      }
    }
    .pageLeftTop_chart {
      height: 87%;
    }
  }
  .pageLeft_bot {
    height: 59%;
    background-image: url("~@/assets/images/fullscreen/框备份2.png");
    background-size: 100% 100%;
    .pageLeftBot_title {
      height: 8.5%;
      display: flex;
      align-items: center;
      padding-left: px2vw(35px);
      span {
        font-size: px2vw(18px);
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #1fd2ff;
      }
    }
    .pageLeftBot_chart {
      height: 91.5%;
    }
  }
}
.pageMain_mid {
  width: 56%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .pageMid_top {
    padding-top: 2%;
    height: 39%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    .pageMid_item {
      width: 49%;
      height: 48%;
      background-image: url("~@/assets/images/fullscreen/框备份mid.png");
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      .picItem {
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: px2vw(84px);
          height: px2vw(84px);
        }
      }

      .conItem {
        height: px2vw(84px);
        width: 80%;
        display: flex;
        flex-direction: column;
        // justify-content: space-between;
        .conText {
          width: 70%;
          display: flex;
          align-items: center;
          p {
            margin: 0;
            width: 50%;
            font-size: px2vw(18px);
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            color: #ffffff;
            text-align: left;
          }
          span {
            width: 50%;
            font-size: px2vw(20px);
            font-family: ArialMT, ArialMT-Regular;
            font-weight: 400;
            text-align: left;
            color: #f6bd16;
          }
        }
      }
      .conItem_top {
        height: px2vw(70px);
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .conRow {
          display: flex;
          p {
            margin: 0;
            width: 52%;
            font-size: px2vw(18px);
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            color: #ffffff;
            text-align: left;
          }
          span {
            width: 48%;
            font-size: px2vw(20px);
            font-family: ArialMT, ArialMT-Regular;
            font-weight: 400;
            text-align: left;
            color: #f6bd16;
          }
          .conRow_left {
            width: 65%;
            display: flex;
          }
          .conRow_right {
            width: 30%;
            display: flex;
            p {
              text-align: right;
            }
          }
        }
      }
    }
  }
  .pageMid_bot {
    height: 59%;
    padding-bottom: 2%;
    .pgeBot_main {
      height: 100%;
      background-image: url("~@/assets/images/fullscreen/框备份3.png");
      background-size: 100% 100%;
      .pageMidBot_title {
        height: 8.8%;
        display: flex;
        align-items: center;
        padding-left: px2vw(110px);
        span {
          font-size: px2vw(18px);
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          color: #1fd2ff;
        }
      }
      .pageMidBot_con {
        height: 91.2%;
        display: flex;
        justify-content: space-between;
        .pageMidBot_table {
          padding-top: px2vw(10px);
          padding-left: px2vw(54px);
          width: 54%;
        }
        .pageMidBot_pic {
          padding-top: px2vw(10px);
          margin-right: px2vw(70px);
          width: 30%;
          position: relative;
        }
      }
    }
  }
}
.pageMain_right {
  width: 21%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .pgeBot_top {
    height: 51%;
    background-image: url("~@/assets/images/fullscreen/框备份.png");
    background-size: 100% 100%;
    .pageRightTop_title {
      height: 9.8%;
      display: flex;
      align-items: center;
      padding-left: px2vw(32px);
      span {
        font-size: px2vw(18px);
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #1fd2ff;
      }
    }
    .pageRightTop_table {
      padding: 0 px2vw(30px);
      height: 90.2%;
      .pageRightTop_flag {
        display: flex;
        .flagSpan {
          font-size: px2vw(14px);
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #f6bd16;
          margin: 0;
          margin-right: px2vw(12px);
          cursor: pointer;
        }
        .flagSp {
          font-size: px2vw(14px);
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          margin: 0;
          margin-right: px2vw(12px);
          color: rgba(50, 197, 255, 0.4);
          cursor: pointer;
        }
      }
      .line {
        height: 1px;
        opacity: 1;
        border: 1px solid;
        border-image: linear-gradient(
            136deg,
            #42ebff 1%,
            #031d52 26%,
            #2cdbff 51%,
            #022772 78%,
            #1fd2ff 99%
          )
          0.5 0.5;
      }
      .tableFlag {
        text-align: right;
        font-size: px2vw(10px);
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #32c5ff;
        margin: 0;
      }
      .pageRightTop_tableCon {
        padding-top: px2vw(5px);
        height: calc(90.2% - 37px);
      }
    }
  }
  .pgeBot_bot {
    height: 47%;
    background-image: url("~@/assets/images/fullscreen/框备份.png");
    background-size: 100% 100%;
    .pageRightBot_title {
      height: 10.7%;
      display: flex;
      align-items: center;
      padding-left: px2vw(32px);
      span {
        font-size: px2vw(18px);
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #1fd2ff;
      }
    }
    .pageRightBot_table {
      height: 89.3%;
      padding: 0 px2vw(30px);
    }
  }
}
// /deep/.dv-scroll-board .row-item .ceil {
//   white-space: normal;
//   text-overflow: clip;
//   overflow: hidden;
//   height: 100%;
//   line-height: normal;
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
//   cursor: pointer;
//   font-size: px2vw(14px);
// }
// /deep/.pageRightTop_tableCon .dv-scroll-board .row-item{
//   height: 60px!important;
// }
/deep/.el-carousel {
  height: 90%;
  border-radius: 4px;
}
.carousel_title {
  font-size: px2vw(16px);
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #ffffff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
</style>
